<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <title>中国象棋</title>
  <style>

    body {
      user-select: none;
      -webkit-user-select: none;
      background: #eee;
    }

    .xu-chess {
      width: 344px;
      height: 387px;
      margin: 40px auto;
      border-bottom: 1px solid #333;
      background: url(chess.png) no-repeat;
      background-size: cover;
      position: relative;
    }
    .xu-chess-cell {
      cursor: pointer;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    .xu-chess-cell-occ {
      text-align: center;
      box-sizing: border-box;
      background: #fff;
      border: 2px solid #000;
    }
    .xu-chess-cell-occ.active {
      background: #dab680;
    }
    .xu-chess-cell-occ-red {
      color: #f40;
    }
    .xu-chess-cell-occ-black {
      color: #333;
    }

    /*按钮*/
    .handler {
      clear: both;
      overflow: hidden;
      width: 344px;
      margin: 0 auto;
    }
    .btn {
      width: 100%;
      float: left;
      border: none;
      padding: 12px;
      background: #f40;
      color: #fff;
      cursor: pointer;

    }

    .chess-rule-box {
      box-sizing: border-box;
      padding: 10px;
      width: 344px;
      margin: 0 auto;
      margin-top: 20px;
      background: #ddd;
    }

    @media screen and (max-width: 400px) {
      .xu-chess, .chess-rule-box {
        transform: scale(.9, .9);
        -moz-transform: scale(.9, .9);
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
      }

    }
  </style>
</head>
<body>
  
  <div class="xu-chess"></div>
  <div class="handler">
    <button class="btn back">后退</button>
  </div>
  <div class="chess-rule-box">
    <h4>规则</h4>
    <p>遵循中国象棋的规则</p>
    <p>红棋先走</p>
    <p>一回合内每一方只能一次操作</p>
    <p>可以后退，没有前进</p>
  </div>

  
  <script src="jquery-1.7.2.js"></script>
  <script src="chess.static.js"></script>
  <script src="chess.js"></script>
  <script>
    var chess = new XuChess()
    $('.back').on('click', function () {
      chess.back()
    })
  </script>
</body>
</html>